<template>
  <div id="page-writeUserInfo">
    <top-header title='填写信息'></top-header>
    <time-line v-if="timeLineInfo" :process-number='timeLineInfo.num' :time-line-arr='timeLineInfo.arr'></time-line>

    <div class="user-info-container">
      <p class="user-info-head">缘主信息</p>
      <div class="user-info-form">
        <div class="user-info-item">
          <p class="user-info-title">姓名</p>
          <input type="text" class="user-info-input" placeholder="请输入姓名" v-model="userName">
        </div>
        <div class="user-info-item">
          <p class="user-info-title">性别</p>
          <div class="user-info-sex">
            <div class="user-info-radioItem" v-for='(item,index) in sexList' :key='item.id' @click="changeSex(index)">
              <span class="user-info-sexTxt">{{item.text}}</span>
              <img src="static/image/public/radio-yes.png" alt="选中" class="user-info-radioIcon" v-if="sexType == index">
              <img src="static/image/public/radio-no.png" alt="未选中" class="user-info-radioIcon" v-else>
              <input type="radio" class="user-info-radioInput" :value="index" v-model="sexType">
            </div>
          </div>
        </div>

        <!-- 日历组件 -->
        <calendar default-str="请选择日期"
                  @getSelectDate='getBirthday'/>

        <!-- 地址选择 -->
        <x-address :address="sendAddress" placeholder ="选择出生地点" @getAddress='getaddress'/>

        <div class="user-info-item" style="border-top:1px solid #E6E6E6" v-if="!isOrderIn">
          <p class="user-info-title">手机号</p>
          <input type="text" class="user-info-input" placeholder="选填，填写后可保存订单" v-model="userPhone">
        </div>

      </div>
    </div>

    <div class="question-complement">
      <p class="question-head">问题补充</p>
      <textarea class="question-text" placeholder="如有问题，可进行补充..." v-model="question"></textarea>
    </div>

    <div class="submit-btn" @click="submitUserInfo">提交</div>
  </div>
</template>

<script>
  import topHeader from '@/components/topHeader';
  import timeLine from '@/components/timeLine';
  import xAddress from '@/components/chooseAddress';
  import calendar from '@/components/calendar/calendar.vue';
  import tool from '@/assets/js/tool.js';

  export default {
    props:[],
    components:{
      topHeader,
      timeLine,
      xAddress,
      calendar
    },
    data:function(){
      return {
        // 用户名
        userName:'',
        // 用户手机号
        userPhone:'',
        //选择的是男还是女，0是男，1是女
        sexType:0,
        //性别内容
        sexList:[{
          id:'male',
          text:"男"
        },{
          id:'female',
          text:"女"
        }],
        //问题补充
        question:'',
        sendAddress:[],
        userBirthInfo:null, //用户生日信息
        // timeLine的内容根据是从问大师傅页面进来，还是订单页面进来改变
        timeLineInfo:false,
        isOrderIn:false,  //是否从订单页面进入
        ordercode:'' //订单号
      }
    },
    created:function(){
      // 改变timeline的内容
      let status = this.$route.query.isOrderIn;
      this.ordercode = this.$route.query.ordercode;
      this.isOrderIn = status;
      if(status){
        this.timeLineInfo = {
          num:2,
          arr:['支付订单','填写信息','等待回复']
        }
      }else{
        this.timeLineInfo = {
          num:3,
          arr:['选择咨询项','支付订单','补充信息','等待回复']
        }
      }
    },
    methods:{
      changeSex:function(val){
        this.sexType = val;
      },
      // 获取生日信息
      getBirthday:function(val){
        this.userBirthInfo = val;
      },
      // 获取地址信息
      getaddress:function(val){
        this.sendAddress = val;
      },
      // 提交按钮
      submitUserInfo:function(){

        if( !tool.checkUserName(this,this.userName) ) return;

        if(this.userBirthInfo == null){
          this.$vux.toast.show({
            text:"日期未选择",
            type:'text',
            position:'top'
          })
          return;
        }

        if(this.sendAddress.length < 1){
          this.$vux.toast.show({
            text:"地址未选择",
            type:'text',
            position:'top'
          })
          return;
        }

        // 如果填了手机号则判断格式。手机号选填
        if( this.userPhone != ''){
          if( !tool.checkPhone(this,this.userPhone) ) return;
        }        

        if( this.question == '' ){
          this.$vux.toast.show({
            text:"问题补充不能为空",
            type:'text',
            position:'top'
          })
          return;
        } 
        let sexNum = this.sexType ? 1 : 2; // 在接口中，1是女，2是男。而在上面定义中，0是男，1是女
        this.$fetch.post('/app/Jmyc/infoSubmit',{
          ordercode: this.$route.query.ordercode ,
          // 测试uid
          uid: this.$store.state.userID || '866472034154769,866472034358089', 
          mobile: this.userPhone,
          username:  this.userName,
          is_single: 1,
          sex: sexNum,
          birthday: this.userBirthInfo.solarDate,
          address: this.sendAddress.join(','),
          nopoint: this.userBirthInfo.noPoint,
          remarks: this.question
        })
        .then( (res) => {
          if(res.code == 1){
            this.$vux.toast.show({
              text:"保存成功",
              type:'text',
              position:'top'
            })
            this.$router.push({
              path:'/submitSuccess',
              query:{
                userInfo:{
                  username:  this.userName,
                  sex: sexNum == 1 ? '女' : '男',
                  solarDate: this.userBirthInfo.solarDate,
                  lunarDate: this.userBirthInfo.lunarDate,
                  address: this.sendAddress.join(','),
                  remarks: this.question,
                  isOrderIn: this.isOrderIn,
                  ordercode: this.ordercode,
                  mid: this.$route.query.mid ||　this.$store.state.mid,
                  isOrderIn: this.isOrderIn
                }                
              }
            })
          }else{
            this.$vux.toast.show({
              text:'保存信息失败：'+res.msg,
              type:'text',
              position:'top'
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '../../assets/css/public.less';
  @import './index.less';
</style>